<template>
    <view class="boxs" v-if="goodsList.length > 0" >
        <!-- <view class="rush-top">
            <view class="left" ></view>
            <view class="right" @click="toList" >
                更多
                <image class="arrow" src="https://image.hzwltb69.com/app/imgs/score/arrows.png" mode="widthFix" >
                </image>
            </view>
        </view> -->
        <!-- <swiper class="rush-big" :autoplay="false" next-margin="70px" duration="100"   >
        <swiper-item class="rush-box" v-for="(item,index) in goodsList" :key="index" item-id="">
            <view class="center">
            <view class="img-box" @click="notRush(item.status,item.id)">
                <image class="ljshop-img" :src="item.img" mode="widthFix" lazy-load="false">
                </image>
            </view>
            <view class="info-box" >
                <view class="title" >
                    {{item.name}}
                </view>
                <view class="time" >
                    {{ item.beginDate.slice(item.beginDate.length-5,item.beginDate.length) }}开抢
                </view>
                <view class="gobuy" >
                    <view class="price-box" >
                    <span>￥</span>
                    <span class="new">{{ item.newPrice }}</span>
                    <span class="price">￥{{ item.price }}</span>
                    </view>
                    <view class="btn" @click="onBuy(item.status,item.id)" :class="{'notBuy': item.status == 2}" >
                        {{ item.status == 2 ? '已抢光' : '立即秒杀' }}
                    </view>
                </view>
            </view>
            </view>
        </swiper-item>
    </swiper> -->
    <scroll-view class="scroll-view_H" scroll-x="true">
			<view id="demo1" v-for="item in goodsList" class="scroll-view-item_H">
            <view class="center">
            <view class="img-box" @click="notRush(item.status,item.id)">
                <image :src="item.img" lazy-load="true">
                </image>
            </view>
            <view class="info-box" >
                <view class="title" >
                    {{item.name}}
                </view>
                <view class="time" >
                    {{ item.beginDate.slice(item.beginDate.length-5,item.beginDate.length) }}开抢
                </view>
                <view class="gobuy" >
                    <view class="price-box" >
                    <span>￥</span>
                    <span class="new">{{ item.newPrice }}</span>
                    <span class="price">￥{{ item.price }}</span>
                    </view>
                    <view class="btn" @click="onBuy(item.status,item.id)" :class="{'notBuy': item.status == 2}" >
                        {{ item.status == 2 ? '已抢光' : '立即秒杀' }}
                    </view>
                </view>
            </view>
            </view>
            </view>
            <view class="tip" @click="toList">
            查 看 更 多
            </view>
	</scroll-view>
    </view>
</template>
<script>
export default{
    data() {
        return {
            goodsList:[],
            time: ""
        }
    },
    created() {
        this.getList()
    },
    methods: {
        notRush(e,s){
            this.$Router.push({
                path: e == 2 ? '/pages/goods/detail' : '/pages/goods/rushbuy/rushdetail',
                query: {
                    id: s
                }
            })
        },
        toList(){
            this.$Router.push({
                path: '/pages/goods/rushbuy/rushhome',
            })
        },
        onBuy(e,i){
            if(e == 2 ){
                uni.showToast({
                    title: '当前商品已经被抢光了~',
                    icon: 'none'
                })
                return
            }
            this.$Router.push({
                path: '/pages/goods/rushbuy/rushdetail',
                query: {
                    id: i
                }
            })
        },
        getRush(){
            this.$http('goods.getRush',{})
            .then(res=>{
                this.time = res.data[0].date;
                this.getList();
            })
        },
        getList(){
            this.$http('goods.getRushList',{
                page: 1,
                size: 5,
                curDate: this.time,
                isHome: true
            })
            .then(res=>{
                this.goodsList = res.data.list
                // 删掉第二个
                // this.goodsList.splice(1,1)
            })
        }

    },
}
</script>
<style lang="scss" scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
        padding-left: 20rpx;
        margin-bottom: 15rpx;
        position: relative;
	}
    .tip{
        display: inline;
        // 竖排文字
        writing-mode: vertical-lr;
        background: #fff;
        color: #ee3638;
        border-radius: 20rpx;
        height: 180rpx;
        padding-top: 0rpx;
        width: 70rpx;
        text-align: center;
        padding-left: 17rpx;
        font-size: 26rpx;
        margin-right: 20rpx;
    }
	.scroll-view-item_H {
		display: inline-block;
		width: 600rpx;
	}
.rush-top{
    padding: 10rpx 20rpx 0 20rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
    .left{
        font-weight: 600;
    }
    .right{
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #999;
        .arrow{
            width: 28rpx;
            height: 28rpx;
            
        }
    }
}
.rush-big{
    // padding-left: 20rpx;
    padding-right: 20rpx;
    height: 200rpx;
    margin-bottom:15rpx;
}
.rush-box{
        width: 600rpx;
        height: 200rpx !important;
        // background: #fff;
        // margin-right: 20rpx !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .center{
            width: 580rpx;
            height: 200rpx;
            background: #fff;
            border-radius: 20rpx;
            display: flex;
            .img-box{
                width: 180rpx;
                height: 180rpx;
                // // background: black;
                border-radius: 20rpx;
                overflow: hidden;
                margin-top: 10rpx;
                margin-left: 10rpx;
                position: relative;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .img-box::after{
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                display: block;
                padding-bottom: 100%;
                width: 70rpx;
                height: 60rpx;
                background: url('https://image.hzwltb69.com/app/date/2023/rushicon.png') no-repeat;
                background-size: 100%;
            }
            .info-box{
                width: 350rpx;
                margin-left: 25rpx;
                padding: 15rpx 0 15rpx 0;
                .title{
                width: 340rpx;
                // background: red;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-weight: 600;
            }
            .time{
                font-size: 20rpx;
                width: 130rpx;
                background-color: #f8f2e1;
                color: #e4853c;
                text-align: center;
                border-radius: 15rpx;
                padding: 3rpx;
                margin-top: 15rpx;
            }
            .gobuy{
                display: flex;
                margin-top: 30rpx;
                justify-content: space-between;
                align-items: center;
                .price-box{
                    font-size: 20rpx;
                    .new{
                        font-size: 30rpx;
                        font-weight: 600;
                    }
                    .price{
                        text-decoration: line-through;
                        color: #999;
                        font-size: 20rpx;
                        margin-left: 10rpx;
                    }
                }
                .btn{
                    background: #ee3638;
                    border-radius: 30rpx;
                    font-size: 24rpx;
                    color: #fff;
                    padding: 10rpx 20rpx 10rpx 20rpx;
                }
            }
            }

        }
::v-deep .rush-box{
    margin-right: 30rpx !important;
}
.notBuy{
    background-color: #8f8f8f !important;
}
</style>